<template>
  <div>
		<w-input @input="handleInput"></w-input>
		<w-show :content="inputValue"></w-show>
    <button @click="handleClick">修改appName</button>
    <p>store.state的值appName: {{ appName }}</p>
    <p>store.getters的值appNameWithVersion: {{ appNameWithVersion }}</p>
    <p v-if="appVersion">新增的appVersion: {{ appVersion }}</p>
    <hr/>
    <p>store.user.state的值userName: {{ userName }}</p>
    <p>store.user.getters的值firstLetter: {{ firstLetter }}</p>

	</div>
</template>

<script>
import WInput from '_c/WInput.vue'
import WShow from '_c/WShow.vue'
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
	name: 'Store',
	components: {
		WInput,
		WShow
	},
	data () {
		return {
			inputValue: ''
		}
  },
  computed: {
    ...mapState({
      appName: state => state.appName,
      appVersion: state => state.appVersion,
      userName: state => state.user.userName
    }),
    ...mapGetters([
      'appNameWithVersion',
      'firstLetter'
    ])
    // appName () {
    //   return this.$store.state.appName
    // },
    // userName () {
    //   return this.$store.state.user.userName
    // },
    // appNameWithVersion () {
    //   return this.$store.getters.appNameWithVersion
    // }
  },
	methods: {
    ...mapMutations([
      'SET_APP_NAME'
    ]),
    ...mapActions([
      'updateAppName'
    ]),
		handleInput (value) {
			this.inputValue = value
    },
    handleClick () {
      // this.$store.commit('SET_APP_NAME', 'newAppName')
      
      // this.$store.commit('SET_APP_NAME', {
      //   appName: 'newAppName'
      // })

      // this.$store.commit({
      //   type: 'SET_APP_NAME',
      //   appName: 'newAppName'
      // })

      // this.SET_APP_NAME({
      //   appName: 'newAppName'
      // })

      this.updateAppName()

      // 为state增加属性
      this.$store.commit({
        type: 'SET_APP_VERSION'
      })
    }
	}
}
</script>
